<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<style>
	#container{
		max-width: 1000px;
		height:auto;
		display:inline-block;
		}
	#cutPhoto {
		height:auto;
		display:inline-block;
		margin-left:175px;
		margin-top:30px;
	}
</style>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String workspace = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
String deploy = request.getRealPath("/");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'cutphoto.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script src="cropper/scriptaculous-js-1.9.0/lib/prototype.js" type="text/javascript"></script>
	<script src="cropper/scriptaculous-js-1.9.0/src/scriptaculous.js" type="text/javascript"></script>
	<script src="cropper/cropper.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
		function onEndCrop( coords, dimensions ) {
			$( 'x1' ).value = coords.x1;
			$( 'y1' ).value = coords.y1;
			$( 'x2' ).value = coords.x2;
			$( 'y2' ).value = coords.y2;
			$( 'width' ).value = dimensions.width;
			$( 'height' ).value = dimensions.height;
		}
		
		// example with a preview of crop results, must have minimumm dimensions
		Event.observe( 
			window, 
			'load', 
			function(options) { 
				new Cropper.ImgWithPreview( 
					'testImage',
					{
						minWidth: 192, 
						minHeight: 256,
						ratioDim: { x: 768, y: 1024 },
						displayOnInit: true, 
						onEndCrop: onEndCrop,
						previewWrap: 'previewArea'
					} 
				) 
			} 
		);
	</script>

  </head>
  
  <body>
<div id="container">
	<div id="cutPhoto">
	<div id="testWrap">
		<!--  <img src="/PhotoUploadPro<s:property value="pagePath"/>" alt="test image" id="testImage"/> -->
		<img src=".<s:property value="savePath"/>/<s:property value="uploadFileName"/>" alt="test image" id="testImage"/>
	</div>
	
	<div id="previewArea" style="float: top;"></div>
	
	<div id="results">
	<form action="cutPhotoAction.action" method="post">
	<input type="hidden" name="fileName" value="<s:property value="pagePath"/>"/>
	<input type="hidden" name="imgChar" value="<s:property value="imageChar"/>"/>

			<input type="hidden" name="cutX" id="x1" />
			<input type="hidden" name="cutY" id="y1" />
			<input type="hidden" name="x2" id="x2" />
			<input type="hidden" name="y2" id="y2" />
			<input type="hidden" name="cutWidth" id="width" />
			<input type="hidden" name="cutHeight" id="height" />
			<br><br>
			<input type="submit" value="Submit">
	</form>
	</div> 
	</div>
</div>
  </body>
</html>
